/* ------------------------------ GENERAL -------------------------------- */
			
body {
	margin: 0;
	padding: 0;
	padding-top: 10vh;
	background-color: black;
	font-family: Roboto, righteous;
}

body > div {
	padding: 5vw;
}

h1 {
	font-size: 8vw;
}
			
h2 {
	font-size: 6vw;
}
			
h3 {
	font-size: 5vw;
}
			
p {
	font-size: 4.5vw;
}
			
h1, h2 {
	font-family: 'Righteous', sans-serif;
	color: white;
	text-align: center;
	margin: 0;
	font-weight: 400;
}
			
h3, h4, p, span, div {
	font-family: 'Roboto', sans-serif;
	color: white;
	text-align: center;
	margin: 0;
	font-weight: 400;
}

button {
	font-family: 'Roboto', sans-serif;
	color: white;
	text-align: center;
	margin: 0;

	padding-top: 2.5vh;
	padding-bottom: 2.5vh;
	padding-left: 3vw;
	padding-right: 3vw;

	font-size: 6vw;
	font-weight: bold;
  
	color: white;
	cursor: pointer;
	white-space: nowrap;
	border: none;
	touch-action: manipulation;
	text-align: center;
	border-radius: 5vw;
	animation-name: popUpAnimation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.button_disabled {
	background-color: var(--color-disabled)!important;
}


blockquote {
	position: relative;
	padding-left: 20px;
}

blockquote:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #ccc;
}

:root {
	--color-contrast: #d65799;

	--color-level0: #5086be; /* Definición de variable de color */
	--color-level1: #83a846;
	--color-level2: #edae44;
	--color-level3: #d65799;
	--color-level4: #745F7E;
	--color-level5: #B02B2C;
	--color-disabled: #C2C0BF;
}

.mainContent {
	justify-content: center;
	align-items: center;
	padding: 5vw;
}

.mainContentHome {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0!important;
}

.display_Hcenter {
	display: flex;
	justify-content: center;
}


/* ------------------------------ HEADER -------------------------------- */

.header {
	position: fixed!important;
	width: 100%;
	top: 0;
	left: 0;
	border-bottom: 1px solid #4d4d4d;
	align-items: center;
	z-index: 9999;
	background-color: #000000;
	height: 10vh;
	padding-left: 0;
	padding-right: 0;

	display: inline-flex;
	justify-content: space-between;
}

.header a {
	display: inline-flex;
	cursor: pointer;
	border: none;
	color: white;
	background-color: transparent;
	cursor: pointer;
	touch-action: manipulation;
	margin-left: 3vh;
	margin-right: 3vh;
	text-decoration: none;
}

.header i {
	font-size: 5vh!important;
}

.header img {
	height: 10vh;
}

.header .btn_back {
	animation-name: popUpAnimation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.header .btn_share {
	animation-name: popUpAnimation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

/* ------------------------------ BLOQUE SELECTOR -------------------------------- */

.block_gameSelector {
	text-align: center;
	display: none;
}

.container_btnsHTP {
	display: flex;
	text-align: center;
	justify-content: center;
}

.container_simpleBtnsHTP {
	animation-name: fadeInDown;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.container_btnsHTP button {
	border-radius: 10vw;
	min-width: 40vw;
	min-height: 10vw;
	font-size: 3.5vw;
	font-weight: bold;
	margin: 0 3vw 5vh 3vw;
	padding: 3vw;
	cursor: pointer;
	white-space: nowrap;
	touch-action: manipulation;
	text-align: center;
	justify-content: center;
	border: none;
	background-color: #DADADA;
	color: #555555;
	animation-name: fadeInDown;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	align-items: center;
	display: inline-flex!important;
}

.container_btnsHTP i {
	margin-right: 1vw;
	font-size: 4vw;
}


.container_btnsLevels {
	animation: slideInFromBottom 0.5s ease-out forwards;
	text-align: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


.container_btnsLevels button {
	padding: 3vh;
	font-size: 8vw;
	font-weight: bold;
	min-width: 70%;
	margin-top: 3vh;
	margin-bottom: 3vh;
	cursor: pointer;
	white-space: nowrap;
	color: white;
	border: none;
	touch-action: manipulation;
	text-align: center;
	border-radius: 5vw;
	white-space: nowrap;
	flex: 1;
}

.container_btnsDifficulty {
	animation: slideInFromBottom 0.5s ease-out forwards;
	text-align: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


.container_btnsDifficulty button {
	padding: 3vh;
	font-size: 8vw;
	font-weight: bold;
	min-width: 70%;
	margin-top: 3vh;
	margin-bottom: 3vh;
	cursor: pointer;
	white-space: nowrap;
	color: white;
	border: none;
	touch-action: manipulation;
	text-align: center;
	border-radius: 5vw;
	white-space: nowrap;
	flex: 1;
}

.btn_level0 {
	background-color: var(--color-level0);
}

.btn_level1 {
	background-color: var(--color-level1);
}

.btn_difficulty1 {
	background-color: var(--color-level1);
}

.btn_level2 {
	background-color: var(--color-level2);
}

.btn_difficulty2 {
	background-color: var(--color-level2);
}

.btn_level3 {
	background-color: var(--color-level3);
}

.btn_level4 {
	background-color: var(--color-level4);
}

.btn_level5 {
	background-color: var(--color-level5);
}

.btn_difficulty3 {
	background-color: var(--color-level5);
}

.class_btn_levelAnimation {
	animation-name: popUpAnimation;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.container_simpleBtnsHTP:nth-child(1) {
	animation-delay: 0.5s;
}

.container_simpleBtnsHTP:nth-child(2) {
	animation-delay: 0.1s;
}

.class_btn_levelAnimation:nth-child(1) {
	animation-delay: 0.15s;
}

.class_btn_levelAnimation:nth-child(2) {
	animation-delay: 0.2s;
}

.class_btn_levelAnimation:nth-child(3) {
	animation-delay: 0.25s;
}

.class_btn_levelAnimation:nth-child(4) {
	animation-delay: 0.30s;
}

.class_btn_levelAnimation:nth-child(5) {
	animation-delay: 0.35s;
}

.class_btn_levelAnimation:nth-child(6) {
	animation-delay: 0.40s;
}

/* ------------------------------ BLOQUE JUEGO -------------------------------- */

.block_gamePhrases {
	animation: slideInFromTop 0.5s ease-out forwards;
	display: none;
}

.block_mayorOMenor {
	animation: slideInFromTop 0.5s ease-out forwards;
	display: none;
}

.style_container_phrasesContainer {
	width: 75vw;;
	height: 40vh;
	margin-bottom: 10px!important;
	margin: auto;
	padding: 5vw;
	border: 1vw solid #ccc;
	border-radius: 5vw;
	text-align: center;
	line-height: 1.2;
	overflow: auto;
	color: white;
	font-size: 7vw;
}

.container_btnsExtra {
	display: none;
}

.container_btnsGeneric {
	display: none;
}

.container_btnsGeneric button {
	width: 60vw;
	font-size: 8vw;
}

.container_btnsVOR {
	display: none;
}

.container_HTP1 div {
	display: none;
}

.container_HTP2 div {
	display: none;
}

.block_gameSimpleGame {
	display: none;
}

.container_simpleGames {
	animation-name: fadeInUp;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.container_simpleGames > div {
	display: none;
}

/* ------------------------------ BLOQUES HTP -------------------------------- */

.block_HTP {
	display: none;
	animation: slideInFromTop 0.5s ease-out forwards;
}

.block_HTP div{
	display: none;
	margin-bottom: 10vw;
}


.table-column1 {
	font-size: 5vw;
	font-weight: bold;
	color: white;
	text-align: center;
	vertical-align: middle;
	border: none;
	width: 25%;
	height: 15vw;
	padding: 5px;
}

.table-row1 {
	font-size: 4vw;
	font-weight: bold;
	color: white;
	text-align: center;
	vertical-align: middle;
	border: none;
}

.table-content {
	font-size: 6vw;
	text-align: center;
	vertical-align: middle;
	border: none;
}

#btn_HTP1 {
	animation-delay: 0.0s;
}

#btn_HTP2 {
	animation-delay: 0.2s;
}

.block_HTP .btn_back {
	background-color: var(--color-contrast);
	padding-left: 20px;
	padding-right: 20px;
	animation: buzzElement 0.7s ease-out forwards;
	font-size: 5vw;
}

/* ------------------------------ POPUPS -------------------------------- */

#popup {
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	z-index: 9998;
	touch-action: manipulation;
	opacity: 0;
	transition: opacity 0.3s;
}

#popup .btn_back {
	top: 0;
	right: 0;
	font-size: 7vh;
	position: absolute;
	padding: 1vh;
	cursor: pointer;
}

#popup_content {
	position: fixed;
	width: 80%;
	height: auto;
	max-height: 80%;
	background-color: grey; /* Fondo gris semi-transparente */
	border: 5px dashed white;
	border-radius: 10vw;
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Asegúrate de que el valor sea mayor que otros elementos */
	padding: 5vw;
	overflow: auto;
	touch-action: manipulation;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.3s, transform 0.3s;
}

#popup_content > div {
	display: none;
}

#popup.in {
	opacity: 1;
}

#popup.out {
	opacity: 0;
}

#popup_content.in {
	opacity: 1;
	transform: scale(1);
}

#popup_content.out {
	opacity: 0;
	transform: scale(0.5);
}



/* ------------------------------ JUEGO: La Botella -------------------------------- */

.block_laBotella img {
	width: 25vw;
	transition: transform 2s ease-out;
}

.block_laBotella .container_bottleBtns {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block_laBotella button {
	background-color: orange;
	height: 10%;
	font-size: 6vw;
	margin-top: 5vw;
}


/* ------------------------------ JUEGO: Botones Verdad o Reto -------------------------------- */

.btn_nextTruth {
	width: 30vw;
	background-color: #D65799;
	border-radius: 5vw;
}

.btn_nextDare {
	width: 30vw;
	background-color: #4ECAC2;
	border-radius: 5vw;
}

.btn_nextGetLuck {
	width: 15vw;
	background-color: #5086be;
	margin-left: 3vw;
	margin-right: 3vw;
	border-radius: 100vw;
}

.btn_showPopupBottle {
	background-color: orange;
	margin-bottom: 5vw;
	animation: popUpAnimation 0.5s ease-out forwards;
	white-space: normal; /* permite que el texto se ajuste a varias líneas */
	overflow-wrap: break-word;
	padding-top: 1.5vh;
	padding-bottom: 1.5vh;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	font-size: 4.5vw;
	margin-top: 3vh;
	display: none;
}

/* ------------------------------ MAIN PAGE -------------------------------- */
	
#block_home {
	display: flex;
	flex-direction: column;
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
	grid-gap: 0px;
	order: 0;
}

.image-grid img {
	max-width: 100%;
	height: auto;
}

.image-grid a {
	text-decoration: none;
	display: flex;
}

.image-container {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: fallInAnimation 0.5s ease-out forwards;
	opacity: 0;
	cursor: pointer;
	touch-action: manipulation;
}

.image-container img {
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
	
}

.image-container:hover img {
	transform: scale(1.1);
}

.image-container:hover .image-text {
	opacity: 0;
}

.image-container:hover::after {
	background: rgba(0, 0, 0, 0);

}

.image-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); 
	transition: background 0.7s ease;
}

.image-container:nth-child(1) {
	animation-delay: 0.05s;
}
	
.image-container:nth-child(2) {
	animation-delay: 0.1s;
}

.image-container:nth-child(3) {
	animation-delay: 0.15s;
}

.image-container:nth-child(4) {
	animation-delay: 0.20s;
}

.image-container:nth-child(5) {
	animation-delay: 0.25s;
}

.image-container:nth-child(6) {
	animation-delay: 0.30s;
}

.image-container:nth-child(7) {
	animation-delay: 0.35s;
}

.image-container:nth-child(8) {
	animation-delay: 0.40s;
}

.image-container:nth-child(9) {
	animation-delay: 0.45s;
}

.image-container:nth-child(10) {
	animation-delay: 0.50s;
}

.image-container:nth-child(11) {
	animation-delay: 0.53s;
}

.image-container:nth-child(12) {
	animation-delay: 0.56s;
}

.image-container:nth-child(13) {
	animation-delay: 0.59s;
}

.image-container:nth-child(14) {
	animation-delay: 0.62s;
}

.image-container:nth-child(15) {
	animation-delay: 0.65s;
}

.image-container:nth-child(16) {
	animation-delay: 0.68s;
}

.image-container:nth-child(17) {
	animation-delay: 0.71s;
}

.image-container:nth-child(18) {
	animation-delay: 0.74s;
}

.image-container:nth-child(19) {
	animation-delay: 0.77s;
}

.image-container:nth-child(20) {
	animation-delay: 0.80s;
}

.image-container:nth-child(21) {
	animation-delay: 0.83s;
}

.image-container:nth-child(22) {
	animation-delay: 0.86s;
}

.image-text {
	position: absolute;
	z-index: 1;
	color: white; /* O el color que prefieras */
	transition: opacity 0.3s ease; /* Añade la transición de opacidad */
	font-weight: bold;
	font-family: righteous;
}
	
	
	
/* ------------------------------ ANIMATIONS -------------------------------- */

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, +100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
	}
}

@keyframes popUpAnimation {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes popUpCloseAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-30%);
		opacity: 0;
	}
	65% {
		transform: translateX(2%);
		opacity: 1;
	}
	75% {
		transform: translateX(2%);
		opacity: 1;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideInFromTop {
	0% {
		transform: translateY(-30%);
		opacity: 0;
	}
	65% {
		transform: translateY(2%);
		opacity: 1;
	}
	75% {
		transform: translateY(2%);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideInFromBottom {
	0% {
		transform: translateY(30%);
		opacity: 0;
	}
	65% {
		transform: translateY(-2%);
		opacity: 1;
	}
	75% {
		transform: translateY(-2%);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes buzzElement {
	0% {
		transform: translate(0) rotate(0);
	}
	20% {
		transform: translate(-8px, -8px) rotate(-2deg);
	}
	40% {
		transform: translate(8px, 8px) rotate(2deg);
	}
	60% {
		transform: translate(-8px, -8px) rotate(-2deg);
	}
	80% {
		transform: translate(8px, 8px) rotate(2deg);
	}
	100% {
		transform: translate(0) rotate(0);
	}
}

@keyframes fallInAnimation {
	0% {
		opacity: 0;
		transform: perspective(800px) rotateX(90deg) translateY(100%);
	}
	100% {
		opacity: 1;
		transform: perspective(800px) rotateX(0) translateY(0);
	}
}

/* ------------------------------ ACORDEÓN -------------------------------- */

/* linia sin expandir */
.accordion .accordion-item {
  border-bottom: 1px solid white;
}

/* linia expandida */
.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #d65799;
}

.accordion button {
  position: relative;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #FFFFFF;
  font-size: 4.5vw;
  border: none;
  background: none;

}

/* color efecte hover */
.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #d65799 !important;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #d65799;
  border: 1px solid #d65799;
}

/* estilo interior titulo caja */
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

/* cercle */
.accordion button .icon {
  display: flex; /* Cambiamos a flex para centrar los palos */
  justify-content: flex-end; /* Centramos horizontalmente a la derecha */
  align-items: center; /* Centramos verticalmente */
  position: absolute;
  right: 0;
  top: 50%; /* Centramos verticalmente en el centro */
  transform: translateY(-50%); /* Ajustamos la posición vertical */
  width: 6vw;
  height: 6vw;
  border: 2px solid;
  border-radius: 50vw;
}

/* palo horizontal */
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  width: 50%;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%); /* Centramos en el centro del círculo */
  top: 50%;
  left: 50%;
}

/* palo vertical */
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  width: 2px;
  height: 50%;
  background: currentColor;
  transform: translate(-50%, -50%); /* Centramos en el centro del círculo */
  top: 50%;
  left: 50%;
}

/* color titulo seleccionado */
.accordion button[aria-expanded='true'] {
  color: #d65799 !important;
}

.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}

/* animacións apetura i cierre */
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 1000px;
  transition: all 1000ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 100ms linear, max-height 100ms linear;
  will-change: opacity, max-height;
}

/* text intern */
.accordion .accordion-content p {
	margin: 15px 0;
	color: white;
}